{% extends "PM/base_with_sidebar.html" %}
{% load static %}

{% block title %}PM项目管理系统{% endblock %}

{# 应用级侧边栏 #}
{% block app_sidebar %}
<nav class="col-md-3 col-lg-2 d-md-block app-sidebar">
    <div class="position-sticky pt-3">
        <div class="sidebar-header p-3">
            <h6 class="text-muted text-uppercase">
                <i class="fas fa-project-diagram me-2"></i>PM项目管理
            </h6>
        </div>

        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link {% if request.resolver_match.url_name == 'select_department' %}active{% endif %}"
                    href="{% url 'select_department' %}">
                    <i class="fas fa-plus me-2"></i>录入信息
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {% if 'report_list' in request.resolver_match.url_name %}active{% endif %}"
                    href="{% url 'report_list' %}">
                    <i class="fas fa-list me-2"></i>证书列表
                </a>
            </li>
            {% if current_user.is_superuser or is_admin %}
            <li class="nav-item">
                <a class="nav-link {% if 'all_report_list' in request.resolver_match.url_name %}active{% endif %}"
                    href="{% url 'all_report_list' %}">
                    <i class="fas fa-table me-2"></i>所有报告
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link {% if 'edit_config' in request.resolver_match.url_name %}active{% endif %}"
                    href="{% url 'edit_config' %}">
                    <i class="fas fa-cog me-2"></i>编辑配置文件
                </a>
            </li>
            {% endif %}
        </ul>

        <hr class="my-3">

        <div class="px-3">
            <h6 class="text-muted text-uppercase small">快速操作</h6>
            <div class="d-grid gap-2">
                <a href="{% url 'select_department' %}" class="btn btn-primary btn-sm">
                    <i class="fas fa-plus me-1"></i>新建报告
                </a>
                <a href="{% url 'report_list' %}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-list me-1"></i>查看报告
                </a>
            </div>
        </div>
    </div>
</nav>
{% endblock %}

{# 调整主内容区域宽度 #}
{% block main_class %}col-md-9 ms-sm-auto col-lg-10{% endblock %}

{# 面包屑导航 #}
{% block breadcrumb_items %}
<li class="breadcrumb-item"><a href="{% url 'select_department' %}">PM系统</a></li>
{% block pm_breadcrumb %}{% endblock %}
{% endblock %}

{# 额外的PM应用CSS #}
{% block extra_css %}
{{ block.super }}
<style>
    .sidebar-header {
        border-bottom: 1px solid #dee2e6;
    }

    .app-sidebar .nav-link.active {
        font-weight: 600;
        border-left: 3px solid #0d6efd;
        background-color: rgba(13, 110, 253, 0.1);
    }

    .quick-actions {
        position: sticky;
        bottom: 20px;
    }

    /* PM系统专用样式 */
    .pm-content {
        padding: 20px;
    }

    .panel {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        margin-bottom: 20px;
    }

    .panel-primary {
        border-color: #0d6efd;
    }

    .panel-heading {
        background-color: #0d6efd;
        color: white;
        padding: 15px 20px;
        border-bottom: 1px solid #0d6efd;
        border-radius: 0.375rem 0.375rem 0 0;
        font-weight: 600;
    }

    .panel-body {
        padding: 20px;
    }

    /* Bootstrap 5兼容样式 */
    .table-condensed {
        font-size: 0.875rem;
    }

    .btn-xs {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
        border-radius: 0.25rem;
    }
</style>
{% endblock %}

{% block extra_js %}
{{ block.super }}
<!-- PM系统专用JavaScript -->
<script src="{% static 'bootstrap/js/bootstrap-table.min.js' %}"></script>
<script src="{% static 'bootstrap/js/FileSaver.min.js' %}"></script>
<script src="{% static 'bootstrap/js/tableExport.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap-table-export.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap-table-toolbar.min.js' %}"></script>
{% endblock %}